{% extends 'base.html' %}
{% block content %}
    <!-- content srart -->
    <div class="am-g am-g-fixed blog-fixed yzq-blog-body">

        <div class="am-u-md-8 am-u-sm-12">
            <div class="am-article-hd">
                <h1 class="am-article-title blog-text-center" style="margin-top: 20px;">{{ article_obj.title }}</h1>

                <div class=" am-article-meta blog-text-center yzq-article-meta">
                    <span class="am-article-bd yzq-article-bd"></span>
                    <span><a href="/article/{{ article_obj.category }}/"
                             class="am-icon-leaf">{{ article_obj.category }}&nbsp;</a></span>
                    <span class="am-icon-user">&nbsp;{{ article_obj.user.author_name }} &nbsp;</span>
                    <span class="am-icon-clock-o">&nbsp;{{ article_obj.created_time }}&nbsp;</span>
                    <span class="am-icon-eye">&nbsp;{{ article_obj.views }}&nbsp;</span>
                    {#                    <span class="am-icon-eye">&nbsp;{{ article_obj.tag }}&nbsp;</span>#}
                    <div id="show_div" style="margin-top: 3px;"></div>
                </div>

                <!-- 内容 -->
                <div class="am-article-bd yzq-article-bd" id="yzq-blog-content">
                    {% autoescape off %}
                        {{ article_obj.body }}
                    {% endautoescape %}
                </div>
                <!-- 上一篇、下一篇-->
                <hr style="background: #290ed0;border: none;height: 1px;margin-bottom: 0;">
                <hr id="comment">
                {% if previous_obj %}
                    上一篇：
                    <a href="/article/{{ previous_obj.category }}/{{ previous_obj.id }}/"
                       title="{{ previous_obj.title }}"
                       onclick="MtaH5.clickStat('25')">
                        {{ previous_obj.title }}
                    </a>
                {% endif %}


                <br>
                {% if next_obj %}
                    下一篇：
                    <a href="/article/{{ next_obj.category }}/{{ next_obj.id }}/" title="{{ next_obj.title }}"
                       onclick="MtaH5.clickStat('25')">
                        {{ next_obj.title }}
                    </a>
                {% endif %}


                <hr>

                <!-- 评论-->
                <hr style="background: #6ad013;border: none;height: 1px;margin-bottom: 0;">
                <div id="comment">
                    {% csrf_token %}
                    <div class="am-form-group am-input-group-danger">
                       <textarea cols="102" rows="5" id="comment-content"
                                 contenteditable="true" placeholder='&nbsp;* 想说点什么 ◠‿◠'
                                 name="body"></textarea>
                    </div>
                    <p>
                        <button class="btn btn-primary btn-block" tabindex="4" onclick="get_comment_content()">发表评论
                        </button>
                    </p>

                </div>

                <div class="comment">
                    <ul class="am-comments-list am-comments-list-flip">
                        {% for blog_com in blogcomment_obj %}
                            <article class="am-comment">
                                <img src="https://sdn.geekzu.org/avatar/57e78de5c6e06e185720747d021e72ff.jpg?s=48&amp;d=wavatar&amp;r=g"
                                     alt="大侠" class="am-comment-avatar" width="48" height="48"
                                     onerror="this.src='http://sdn.geekzu.org/avatar/default'">

                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <div class="am-comment-meta">{{ blog_com.created_time }}</div>
                                    </header>
                                    <div class="am-comment-bd">
                                        {{ blog_com }}
                                    </div>
                                </div>
                            </article>
                            <br>
                        {% endfor %}

                    </ul>
                </div>

            </div>

        </div>
        <!-- content end -->
        <div class="am-u-md-4 am-u-sm-12 blog-sidebar" id="ad">

            <!--个人信息-->
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>About Author</span></h2>
                <div class="am-img-circle">
                    <img src="/static/images/icon/my.jpg" alt="about me" class="round_icon">
                </div>
                <p><b>zxy</b> ( 中原·丐帮 )</p>
                <p>远赴人间惊鸿宴，一睹人间盛世颜。</p>
                <br>
                <p>我是
                    xy（向阳），应届本科毕业生，想找个工作
                    😊</p>
            </div>

            <!--gitee链接-->
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>Contact Author</span></h2>
                <p>
                    <a href="mailto:1943374299@qq.com" title="发邮件给我"><span
                            class="am-icon-envelope am-icon-fw blog-icon"></span></a>

                    <a target="_blank" href="https://gitee.com/xiangyang929/" title="my github"><span
                            class="am-icon-github am-icon-fw blog-icon"></span></a>
                    <a target="_blank" href="https://gitee.com/xiangyang929/" title="我的码云"><span
                            class="am-icon-cloud am-icon-fw blog-icon"></span></a>
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1943374299&amp;site=qq&amp;menu=yes"
                       title="QQ 联系我"><span class="am-icon-qq am-icon-fw am-primary blog-icon"></span></a>


                </p>
            </div>
            <!--兼职-->
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>我有一个朋友</span></h2>
                <p>专门帮别人</p>
                <p>写毕业设计程序系统</p>
                <p>网站管理系统搭建</p>
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1943374299&amp;site=qq&amp;menu=yes"
                   title="QQ 联系我"><span class="am-icon-qq am-icon-fw am-primary blog-icon"></span></a>
            </div>


        </div>
    </div>

    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>


    <script type="text/javascript">
        function get_comment_content() {
            // jQuery 获取文本输入的内容
            var comment_content = $('#comment-content').val();
            {#var comment_content = $('#comment-content').text();#}
            params = {'comment_content': comment_content, csrfmiddlewaretoken: '{{ csrf_token }}'}
            $.post('/post_comment/{{ article_obj.id }}/', params, function (data) {
                if (data.res == 1) {
                    alert('评论成功')
                    window.location.reload()  //刷新页面
                } else {
                    alert(data.res)
                }

            })
        }

    </script>
{% endblock %}

